<template>
  <div class="root">
    <acme-app-bar title="GridIcon"></acme-app-bar>
    
    <div class="ui-title">基础用法</div>
    <acme-grid-icon :list="iconList" style="padding: 10px 0" />

    <div class="ui-title">自定义列数</div>
    <acme-grid-icon :list="iconList" style="padding: 10px 0" :column="4" />

    <div class="ui-title">自定义行数</div>
    <acme-grid-icon :list="iconList" style="padding: 10px 0" :row="2" />

    <div class="ui-title">按钮描述</div>
    <acme-grid-icon :list="iconList2" style="padding: 10px 0" />
  </div>
</template>

<script>
  import AcmeGridIcon from "@/components/acme-design/grid-icon";
  export default {
    components: {
      AcmeGridIcon
    },
    data() {
      return {
        iconList: [
          {
            name: '潮流服饰',
            icon: 'https://www.qiniu.lingchen.kim/daka.png',
          },{
            name: '附近超市',
            icon: 'https://www.qiniu.lingchen.kim/yaoqing.png',
          },{
            name: '免费水果',
            icon: 'https://www.qiniu.lingchen.kim/youjian.png',
          },{
            name: '借钱',
            icon: 'https://www.qiniu.lingchen.kim/yiduyoujian.png',
          },{
            name: '生活缴费',
            icon: 'https://www.qiniu.lingchen.kim/shuoming.png',
          },{
            name: '爱回收',
            icon: 'https://www.qiniu.lingchen.kim/tonggao.png',
          },{
            name: '天天国际',
            icon: 'https://www.qiniu.lingchen.kim/xinjian.png',
          },{
            name: '宠物',
            icon: 'https://www.qiniu.lingchen.kim/tixian.png',
          },{
            name: '寄件服务',
            icon: 'https://www.qiniu.lingchen.kim/shoucang.png',
          },{
            name: '更多频道',
            icon: 'https://www.qiniu.lingchen.kim/rili.png',
          },
        ],
        iconList2: [
          {
            name: '附近超市',
            icon: 'https://www.qiniu.lingchen.kim/yaoqing.png',
            brief: '简单介绍'
          },{
            name: '潮流服饰',
            icon: 'https://www.qiniu.lingchen.kim/shipin.png',
            brief: '简单介绍'
          },{
            name: '免费水果',
            icon: 'https://www.qiniu.lingchen.kim/youjian.png',
            brief: '简单介绍'
          },{
            name: '借钱',
            icon: 'https://www.qiniu.lingchen.kim/yiduyoujian.png',
            brief: '简单介绍'
          }
        ]
      };
    },
    methods: {},
  };
</script>

<style lang="scss" scoped>
  .root {
    padding-bottom: 20px;
    justify-content: space-between;

    // 自定义图标上下间距
    // /deep/ .grid-icon {

    //   .container {
    //     margin-top: -20px !important;
    //   }

    //   .item {
    //     margin-top: 20px !important;
    //   }
    // }
  }
</style>